<template>
    <div class="heightContainer">
        <div class="back" @click="goBack"></div>
        <div class="title"></div>
        <transition name="question" appear>
            <div class="question">
                <p class="choose">选择您的身高</p>
                <p class="warning">我们将使用这些数据</p>
                <p class="warning">为您提供更好的改善计划</p>
            </div>
        </transition>
        <div class="index"></div>
        <p class="myHeight">{{ myHeight }}</p>
        <p class="unit">cm</p>
        <div class="inputContainer">
            <van-field
                v-model="myHeight"
                label="填写身高"
                left-icon="smile-o"
                placeholder="请填写身高(cm)"
                @keyup.enter="handleSubmit"
            />
        </div>
        <div class="regularBmi bmi" v-if="myHeight===165"></div>
        <div class="highBmi bmi" v-if="myHeight===150"></div>
        <div class="lowBmi bmi" v-if="myHeight===185"></div>
        <div class="next" @click="gotoProject"></div>
    </div>
</template>

<script>
import axios from 'axios';
import { Field } from 'vant';
    export default {
        name:'myHeight',
        components:[Field],
        data(){
            return{
                myHeight:165
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            gotoProject(){
                localStorage.setItem('height',this.myHeight)
                axios({
                    url:'http://localhost:8080/polycystic/user/addDetail',
                    method:'post',
                    data:{
                        'isPcos':localStorage.getItem('isPcos'),
                        'age':localStorage.getItem('age'),
                        'birthday':localStorage.getItem('birthday'),
                        'pcosOnsetDate':localStorage.getItem('pcosOnsetDate'),
                        'symptoms':localStorage.getItem('symptoms'),
                        'sleep':localStorage.getItem('sleep'),
                        'currentWeight':localStorage.getItem('currentWeight'),
                        'targetWeight':localStorage.getItem('targetWeight'),
                        'height':localStorage.getItem('height'),
                    },
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                }).then(res=>{
                    console.log(res);
                })
                this.$router.replace({
                    name:'project',
                })
            }
        }
    }
</script>

<style scoped>
    .heightContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
        overflow: hidden;
    }
    .back{
        background-image: url(../assets/img/0-icon@2x/0-18back.png);
        width: 0.48rem;
        height: 0.48rem;
        position: absolute;
        background-position: center;
        background-size: contain;
        top:1.12rem;
        left:.64rem;
    }
    .title{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-11bodyData.png);
        width: 1.28rem;
        height: .68rem;
        background-position: center;
        background-size: contain;
        left: 3.1rem;
        top: 1.08rem;
    }
    .question{
        position: absolute;
        color: #333333;
        top: 2.28rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .question .choose{
        font-size: 0.45rem;
        font-family: 'PingFangSC-Mediuem';
        transition: all 0.5s;
    }
    .question .warning{
        font-size: 0.26rem;
        font-family: 'PingFangSC-Regular';
        color: #747474;
        transition: all 0.5s;
    }
    .index{
        position: absolute;
        background-image: url(../assets/img/0-icon@2x/0-22indexicon.png);
        width: 0.32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
        top:5.5rem;
        left: 3.58rem;
        transition: all 0.5s;
    }
    .myHeight{
        color: #333333;
        font-size: 0.8rem;
        font-family: 'PingFangSC-Mediuem';
        position: absolute;
        left: 3rem;
        top:6.5rem;
        transition: all 0.5s;
    }
    .unit{
        position: absolute;
        font-family: 'PingFangSC-Regular';
        color: #333333;
        top:6.95rem;
        left: 4.7rem;
        font-size: 0.35rem;
    }
    .bmi{
        position: absolute;
        width: 6.26rem;
        height: 1.52rem;
        background-position: center;
        background-size: contain;
        left: 0.62rem;
        top:11.96rem;
    }
    .regularBmi{
        background-image: url(../assets/img/0-icon@2x/0-24regularBMI.png);
    }
    .lowBmi{
        background-image: url(../assets/img/0-icon@2x/0-23lowBMI.png);
    }
    .highBmi{
        background-image: url(../assets/img/0-icon@2x/0-25highBMI.png);
    }
    .next{
        background-image: url(../assets/img/0-icon@2x/0-20next.png);
        width: 6.22rem;
        height: 0.88rem;
        position: absolute;
        top:13.7rem;
        left: 0.64rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.4rem;
    }
    .inputContainer{
        margin: 0 auto;
        width: 300px;
        margin-top: 400px;
    }
</style>